<template>
	<view class="mine-page" >
		<!-- 头部信息（沿用第一个代码结构，套用第二个样式） -->
		<view class="user-header">
			<image class="avatar" src="/static/Mine/headphoto.jpg" mode="widthFix"></image>
			<view class="user-info">
				<text class="welcome">HI~欢迎回来</text>
				<text class="username" v-if="isLogin">{{ userInfo.nickname }}</text>
			</view>
			<!-- 关注/话题统计（第一个代码结构，套用第二个样式） -->
			<view class="stats-bar" v-if="isLogin">
				<text class="stats-item">关注 <span class="stats-num">{{ followCount }}</span></text>
				<text class="stats-item">话题 <span class="stats-num">{{ topicCount }}</span></text>
			</view>
			<!-- 未登录时显示登录按钮（第一个代码逻辑） -->
			<button class="login-btn" @click="toLogin" v-if="!isLogin">登录</button>
		</view>

		<!-- 功能按钮（第一个代码结构，套用第二个样式） -->
		<view class="func-btns">
			<view class="func-item" @click="toCollect" v-if="isLogin">
				<image src="/static/Mine/star-icon.png" mode="widthFix"></image>
				<text>收藏</text>
			</view>
			<view class="func-item" @click="toHistory" v-if="isLogin">
				<image src="/static/Mine/clock-icon.png" mode="widthFix"></image>
				<text>历史</text>
			</view>
			<view class="func-item" @click="toSetting" v-if="isLogin">
				<image src="/static/Mine/setting-icon.png" mode="widthFix"></image>
				<text>设置</text>
			</view>
		</view>

		<!-- 红包广告栏（第一个代码结构，套用第二个样式） -->
		<view class="red-packet-ad" @click="toRedPacket">
			<text class="ad-title">瓜分30万现金红包</text>
			<text class="ad-count">已有385,893人参与</text>
			<view class="grab-btn">速抢 >></view>
		</view>

		<!-- 功能入口（第一个代码结构，套用第二个样式） -->
		<view class="publish-area" v-if="isLogin">
			<text class="publish-title">分享新鲜事</text>
			<text class="publish-desc">轻触 发布身边的新鲜事</text>
			<image class="star-icon" src="/static/star-icon.png" mode="widthFix"></image>
			<button class="publish-btn" @click="publishStatus">发布动态</button>
		</view>

		<!-- 我的成就区域（新增，与第二个代码样式一致） -->
		<view class="achievement-area" v-if="isLogin">
			<text class="achievement-title">我的成就</text>
			<view class="achievement-list">
				<view class="achievement-item">
					<image src="/static/achievement1.png" mode="widthFix"></image>
					<text>新星探索者</text>
				</view>
				<view class="achievement-item">
					<image src="/static/achievement2.png" mode="widthFix"></image>
					<text>一周活跃达人</text>
				</view>
				<view class="achievement-item">
					<image src="/static/achievement3.png" mode="widthFix"></image>
					<text>社交新人</text>
				</view>
			</view>
		</view>

		<!-- 未登录提示（第一个代码逻辑，套用第二个样式） -->
		<view class="no-login-tip" v-if="!isLogin">
			请先登录，才能使用收藏、关注、评论功能哦~
		</view>
	</view>
</template>

<script>
	// 完全保留第一个代码的功能逻辑，不做任何修改
	export default {
		data() {
			return {
				isLogin: false, // 登录状态
				userInfo: {}, // 用户信息
				followCount: 3, // 截图中显示“关注3”
				topicCount: 0 // 截图中显示“话题0”
			};
		},
		onShow() {
			this.checkLoginStatus();
		},
		methods: {
			checkLoginStatus() {
				const user = uni.getStorageSync('userInfo');
				if (user) {
					this.isLogin = true;
					this.userInfo = user;
					this.updateTabBarText(true);
				} else {
					this.isLogin = false;
					this.updateTabBarText(false);
				}
			},
			updateTabBarText(isLogin = true) {
				try {
					uni.setTabBarItem({
						index: 3, 
						text: isLogin ? '我的' : '未登录'
					});
				} catch (e) {
					console.log('更新tabBar失败:', e);
				}
			},
			toLogin() {
				if (!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login?from=mine'
					});
				}
			},
			toCollect() {
				uni.navigateTo({
					url: '/pages/collect/collect'
				});
			},
			toHistory() {
				uni.navigateTo({
					url: '/pages/history/history'
				});
			},
			toSetting() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				});
			},
			// 红包广告点击事件
			toRedPacket() {
				console.log('点击了红包广告');
			},
			// 新增发布动态方法（与第二个代码一致）
			publishStatus() {
				uni.showToast({
					title: "发布动态",
					icon: "none"
				});
			}
		}
	};
</script>

<style>
	/* 完全套用第二个代码的样式，仅调整与第一个代码结构匹配的部分 */
	.mine-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;/* 整体背景色与第二个代码一致 */
	}

	/* 顶部用户信息区域（完全套用第二个代码样式） */
	.user-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 0;
		/* background-color: #fff8e6; */
		position: relative;
		margin-bottom: 20rpx;
	}

	/* 关注/话题模块样式（完全套用第二个代码） */
	.stats-bar {
		display: flex;
		gap: 40rpx;
		margin-top: 15rpx;
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
	}

	.stats-item {
		font-size: 28rpx;
		color: #666;
	}

	.stats-num {
		color: #e53935;
		font-weight: bold;
	}

	.avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		margin-bottom: 10rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #333;
	}

	.welcome {
		margin-right: 10rpx;
	}

	.username {
		color: #e53935;
		font-weight: bold;
	}

	/* 登录按钮（适配第二个代码样式风格） */
	.login-btn {
		background-color: #e53935;
		color: #fff;
		border-radius: 20rpx;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	/* 功能按钮区域（完全套用第二个代码样式） */
	.func-btns {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0;
		margin: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.func-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.func-item image {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.func-item text {
		font-size: 28rpx;
		color: #333;
	}

	/* 红包广告（完全套用第二个代码样式） */
	.red-packet-ad {
		background-color: #ff5722;
		color: #fff;
		padding: 20rpx 30rpx;
		margin: 0 30rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.ad-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.ad-count {
		font-size: 24rpx;
		margin-top: 5rpx;
	}

	.grab-btn {
		background-color: #00c853;
		color: #fff;
		border-radius: 5rpx;
		padding: 8rpx 15rpx;
		font-size: 28rpx;
	}

	/* 功能入口（完全套用第二个代码的发布区域样式） */
	.publish-area {
		background-color: #e3f2fd;
		margin: 0 30rpx 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.publish-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 5rpx;
	}

	.publish-desc {
		font-size: 24rpx;
		color: #666;
	}

	.star-icon {
		width: 60rpx;
		height: 60rpx;
		margin: 15rpx 0;
	}

	.publish-btn {
		background-color: #bbdefb;
		color: #1976d2;
		border-radius: 5rpx;
		padding: 8rpx 20rpx;
		font-size: 28rpx;
	}

	/* 我的成就区域（完全套用第二个代码样式） */
	.achievement-area {
		margin: 0 30rpx 30rpx;
	}

	.achievement-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
	}

	.achievement-title::before {
		content: "";
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		background-size: cover;
		margin-right: 10rpx;
	}

	.achievement-list {
		display: flex;
		justify-content: space-between;
	}

	.achievement-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.achievement-item image {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 10rpx;
	}

	.achievement-item text {
		font-size: 24rpx;
		color: #666;
	}

	/* 未登录提示（适配第二个代码样式风格） */
	.no-login-tip {
		color: #666;
		text-align: center;
		padding: 30rpx;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
</style>